<template>
	<div class="header">
		<img :src="`http://127.0.0.1/api/public/showimg/${1}`" class="logo"/>
		<ul class="menus">
			<li>
				<router-link to="/mobile/home">首页推荐</router-link>
			</li>
			<li>
				<router-link to="/mobile/bookslist">书库</router-link>
			</li>
			<li>
				<router-link to="/mobile/my">我的</router-link>
			</li>
		</ul>
		<div class="search" @click="goSearch()">
			<img src="@/assets/img/mobile/search.png"/>
		</div>
	</div>
</template>

<script>
	export default{
		name:'MobileHeader',
		data(){
			return{}
		},
		methods:{
			goSearch(){
				this.$router.push('/mobile/search');
			}
		}
	}
</script>

<style scoped>
	.header{
		width: 100%;
		height: 3.5rem;
		background-color: #a68b5b;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		z-index: 10;
		/* position: relative; 定位的元素保留原本的位置 */
		/* position:absolute; 定位的元素抛弃原来的位置，被其他标签顶替 */
	}
	.header .logo{
		margin-left: 0.5rem;
		height: 95%;
		margin-bottom: 2%;
	}
	.header .menus{
		margin: 0;
		padding: 0;
		list-style: none;
		height: 100%;
		width: 55%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: white;
		/* 默认显示；动画开始的时候，设置为隐藏状态 */
		display: block;
	}
	.header .menus li a{
		display: block;
		width: 33.33%;
		float: left;
		height: 3.2rem;
		line-height: 3.2rem;
		text-align: center;
		color: white;
	}
	.header .menus li .router-link-active{
		border-bottom: 0.3rem solid gold;
		color: gold;
	}
	.header .search{
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		border: 1px solid white;
		margin-right: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* PC端的事件；鼠标事件：手指事件/手势事件touch */
	/* hover属于PC端的鼠标操作，不适合在移动端运行 */

	
	/* PC端的事件；鼠标事件：手指事件/手势事件touch */
	/* hover属于PC端的鼠标操作，不适合在移动端运行 */
	/* .header .search:hover{
		/* 动画的名字 动画的时长 动画的速度 */
		/* animation: formWidth 1s linear; */
	/*} */
	/* 将form标签宽度从2rem————>20rem */
	@keyframes formWidth{
		/* 宽度从2rem开始 */
		0%{
			width: 2rem;
		}
		/* 到20rem结束 */
		100%{
			width: 20rem;
		}
	}
</style>